<template>
	<view class="double-slider" :style="{
		width: `calc(${sliderWidth} - ${blockSize})`,
		height: sliderHeight,
		background: `${indicatorColor}`,
		borderRadius: `${radius}`,
		margin: `calc(${blockSize} / 2) ${blockSize} / 2`,
		
	}">
	<!-- border:`${border}` -->
		<view class="active-slider" :style="{
			width: `${xWidth - activeX}px`,
			height: sliderHeight,
			background: `${disabled || (leftBlockDisabled && rightBlockDisabled)? disabledIndicatorColor:activeColor}`,
			transform: `translateX(${activeX}px)`,
		}">
			<view class="block1" :style="[getLeftBlockStyle]" @touchstart="blockStart1"
				@touchmove.stop.parevent="blockMove1"></view>
			<view class="block2" :style="[getRightBlockStyle]" @touchstart="blockStart2"
				@touchmove.stop.parevent="blockMove2" @touchend="isLeft = false"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			sliderWidth: {
				type: String,
				default: "100%"
			},
			sliderHeight: {
				type: String,
				default: "15rpx"
			},
			indicatorColor: {
				type: String,
				default: "#EFEFEF"
			},
			activeColor: {
				type: String,
				default: "skyblue"
			},
			radius: {
				type: String,
				default: "20rpx"
			},
			blockSize: {
				type: String,
				default: "36rpx"
			},
			blockColor: {
				type: String,
				default: "#3489F8"
			},
			currentValue: {
				type: Array,
				default: [20, 80]
			},
			minValue: {
				type: Number,
				default: 0
			},
			border:{
				type: String,
				default: "none"
			},
			maxValue: {
				type: Number,
				default: 100
			},
			step: {
				type: Number,
				default: 0
			},
			disabled: {
				type: Boolean,
				default: false
			},
			leftBlockDisabled: {
				type: Boolean,
				default: false
			},
			rightBlockDisabled: {
				type: Boolean,
				default: false
			},
			disabledIndicatorColor: {
				type: String,
				default: "#bababa"
			},
			disabledBlockColor: {
				type: String,
				default: "#8b8b8b"
			},
			blockStyle: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.double-slider').boundingClientRect(res => {
				this.width = res.width;

				const cMinP = this.currentValue[0] / this.maxValue * 100;
				const cMaxP = this.currentValue[1] / this.maxValue * 100;
				console.log(this.width)
				this.activeX = this.width * (cMinP * 0.01);
				this.xWidth = this.width * (cMaxP * 0.01);


				this.minStepValue = this.currentValue[0];
				this.maxStepValue = this.maxValue * (cMaxP * 0.01);
			}).exec();

			query.select('.block1').boundingClientRect(res => {
				this.blockWidth = res.width;
			}).exec();

		},
		data() {
			return {
				width: 0,
				xWidth: 0,
				activeX: 0,
				blockWidth: 0, // 块宽度
				blockX1: 0,
				blockX2: 0,
				overlap: false,
				isLeft: false,
				minStepValue: 0,
				maxStepValue: 0,
				blockStyles:this.blockStyle
				
			}
		},
		computed: {
			stepValueW() {
				const stepP = this.step / this.maxValue * 100;
				return this.width * stepP * 0.01;
			},
			getBlockStyle() {
				this.blockStyles = {
					width: this.blockSize,
					height: this.blockSize,
					border:this.border,
					background:this.background,
					...this.blockStyles,
				}
				return this.blockStyles;
			},
			getLeftBlockStyle() {
				// blockStyle
				const styleObj = Object.assign({}, this.getBlockStyle);
				styleObj.background = styleObj.backgroundImage || styleObj.background ? styleObj.background :
					`${this.disabled || this.leftBlockDisabled ? this.disabledBlockColor : this.blockColor}`;
				return styleObj;
			},
			getRightBlockStyle() {
				const styleObj = Object.assign({}, this.getBlockStyle);
				styleObj.background = styleObj.backgroundImage || styleObj.background ? styleObj.background :
					`${this.disabled || this.rightBlockDisabled ? this.disabledBlockColor : this.blockColor}`;
				return styleObj;
			}

		},
		methods: {
			// 记录一个块位置
			blockStart1(e) {
				if (this.disabled || this.leftBlockDisabled) {
					return;
				}
				this.blockX1 = e.touches[0].clientX;
			},
			// 记录第二个块位置
			blockStart2(e) {
				this.blockX2 = e.touches[0].clientX;
				if (Math.round(this.activeX) == Math.round(this.xWidth)) {
					this.overlap = true;
				} else {
					this.overlap = false;
				}
			},
			// 第一个块移动
			blockMove1(e) {
				if (this.disabled || this.leftBlockDisabled) {
					return;
				}
				let x = (this.blockX1 + (e.touches[0].clientX - this.blockX1)) - this.blockWidth;
				// 如果设置了步长
				if (this.step > 0) {
					// 移动的数值
					let cValue = this.maxValue * (x / this.width * 100 * 0.01);

					if (cValue >= this.minStepValue + this.step && Math.round(this.activeX) < Math.round(this.xWidth)) {
						this.minStepValue += this.step;
						this.activeX += this.stepValueW;
						this.sendEmit();
					} else if (cValue <= this.minStepValue - this.step && Math.round(this.activeX) > 0) {
						this.minStepValue -= this.step;
						this.activeX -= this.stepValueW;
						this.sendEmit();
					}
					return;
				}

				// 如果本次移动的x值超过最大的值或小于最小值
				if (x > this.xWidth) {
					x = this.xWidth;
				} else if (x <= 0) {
					x = 0;
				}
				this.activeX = x;
				this.sendEmit();
			},
			// 第二个块移动
			blockMove2(e) {
				const activeX = this.activeX;
				let x = (this.blockX2 + (e.touches[0].clientX - this.blockX2)) - this.blockWidth;
				// 如果是重叠, 并且只对左边生效
				if (this.overlap && (x - this.step) <= this.xWidth) {
					if (this.disabled || this.leftBlockDisabled) {
						return;
					}
					this.isLeft = true;
					let cValue = this.maxValue * (x / this.width * 100 * 0.01);
					// 如果有步长
					if (this.step > 0) {
						if (cValue >= this.minStepValue + this.step && Math.round(this.activeX) < Math.round(this
							.xWidth)) {
							this.minStepValue += this.step;
							this.activeX += this.stepValueW;
							this.sendEmit();
						} else if (cValue <= this.minStepValue - this.step && Math.round(this.activeX) > 0) {
							this.minStepValue -= this.step;
							this.activeX -= this.stepValueW;
							this.sendEmit();
						}
						return;
					}
					// 移动超出设置
					if (x <= 0) {
						x = 0;
					} else if (x >= this.xWidth) { // 如果移动的值大于最大值
						x = this.xWidth;
					}
					this.activeX = x;
					this.sendEmit();
				} else {
					if (this.disabled || this.rightBlockDisabled) {
						return;
					}
					// 重叠之后，第一次拖动是往左边的话将无法超出右边
					if (this.isLeft) {
						this.activeX = this.xWidth;
						this.sendEmit();
						return;
					}

					// 不重叠正常设置
					this.overlap = false;
					// 如果设置步长
					if (this.step > 0) {
						// 移动的数值
						let cValue = this.maxValue * (x / this.width * 100 * 0.01);
						// 判断移动方向
						if (cValue >= this.maxStepValue + this.step && Math.round(this.xWidth) < Math.round(this.width)) {
							this.maxStepValue += this.step;
							this.xWidth += this.stepValueW;
							this.sendEmit();
						} else if (cValue <= this.maxStepValue - this.step && Math.round(this.xWidth) > Math.round(this
								.activeX)) {
							this.maxStepValue -= this.step;
							this.xWidth -= this.stepValueW;
							this.sendEmit();
						}

						return;
					}

					// 移动超出设置
					if (x <= this.activeX) {
						x = this.activeX;
					} else if (x >= this.width) { // 如果移动的值大于最大值
						x = this.width;
					}
					// 正常设置
					this.xWidth = x;
				}
				this.sendEmit();
			},

			sendEmit() {
				// 最小百分比
				let minP = Math.floor(this.activeX / this.width * 100);
				// 最小值
				let minValue = Math.floor((this.maxValue * (minP * 0.01)) * 100) / 100;

				// 最大百分比
				let maxP = Math.floor(this.xWidth / this.width * 100);
				// 最大值
				let maxValue = Math.floor((this.maxValue * (maxP * 0.01)) * 100) / 100;

				// console.log("最小百分比",minP);
				// console.log("最小值",minValue);

				// console.log("最大百分比",maxP);
				// console.log("最大值",maxValue);

				this.$emit("change", {
					minValue,
					maxValue,
					minP,
					maxP
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.double-slider {
		margin: 0 auto;

		.active-slider {
			position: relative;

			.block1,
			.block2 {
				border-radius: 50%;
				position: absolute;
				top: 50%;
				transition: all 0.05s;
			}

			.block1 {
				left: 0;
				transform: translate(-50%, -50%);
			}

			.block2 {
				right: 0;
				transform: translate(50%, -50%);
				z-index: 1;
			}
		}
	}
</style>
